<template>
  <view class="container">
    <block v-if="conditionItem.articleType == 0">
      <view class="my_pet_user_box">
        <view class="my_pet_user_box_left" @click="navTo('/subpkg/userInfo/userInfo?id=' + conditionItem.createUser)">
          <image class="image" :src="conditionItem.avatar" mode="widthFix"></image>
          <view class="my_pet_user_title">
            <h1>{{conditionItem.nickname}}</h1>
            <block v-if="articleShow">
              <text v-if="conditionItem.createTime">{{conditionItem.createTime}}</text>
            </block>
            <text v-else>{{$util.dateUtils.format(conditionItem.createTime)}}</text>
          </view>
        </view>
        <!-- <van-rate v-if="scoreShow" class="my_pet_user_box_right" :value="ratevalue" @change="onrateChange" /> -->
        <view class="my_pet_user_box_right" v-if="attentionShow && conditionItem.createUser != userInfo.id">
          <view :class="conditionItem.followed?'attention':'attention1'"
            @click="onfollowed(conditionItem.createUser,conditionItem.followed)">
            {{conditionItem.followed?'已关注':'关注'}}
          </view>
        </view>
      </view>
      <block>
        <view class="my_pet_body" @click="navTo('/subpkg/details/details?id='+ conditionItem.id + '&name=' + '动态')">
          
		  <rich-text v-if="conditionItem.postsContent" :nodes="this.$util.Escape2Html(conditionItem.postsContent)"></rich-text>
        </view>
        <!-- 图片列表 -->
        <user-imglist :sliderImgs="conditionItem.sliderImgs"></user-imglist>
        <!-- 品种 -->
        <view class="my_pet_variety" v-if="varietiesShow">
          <view class="classify" v-if="articleShow">
            动态
          </view>
          <view class="variety" v-if="varietyShow"
            @click="navTo('/subpkg/petInfo/petInfo?id=' + conditionItem.associatedCategoryId)">
            <image src="/static/clicleicon.png" class="variety_text" mode="aspectFill"></image>
            <text>{{conditionItem.categoryName}}</text>
          </view>
          <view class="variety" v-if="conditionItem.productName"
            @click="navTo('/subpkg/productdetails/productdetails?id=' + conditionItem.associatedProductId)">
            <image v-if="conditionItem.previewImage" class="variety_text" :src="conditionItem.previewImage  + '/list'"
              mode="aspectFill"></image>
            <text>{{conditionItem.productName}}</text>
          </view>
          <view v-if="conditionItem.activityTitle" class="variety"
            @click="navTo('/subpkg/activity_particulars/activity_particulars?id=' +conditionItem.associatedActivityId)">
            <image src="/static/activeicon.png" class="variety_text" mode="aspectFill"></image>
            <text>{{conditionItem.activityTitle}}</text>
          </view>
        </view>

        <!-- 评论 -->
        <view v-if="conditionItem.comments > 0" class="hotword"
          @click="navTo('/subpkg/details/details?id='+ conditionItem.id + '&name=' + '动态')">
          <view class="hotword_text">
            <text style="color: rgba(61, 61, 61, 0.8);font-weight: 500;">{{conditionItem.hotComment.nickname}}：</text>
			{{conditionItem.hotComment.content}}
          </view>
          <view class="hotword_box">
            <text>查看全部{{conditionItem.hotComment.replies}}条回复</text>
            <tui-icon name="arrowright" color="rgba(61, 61, 61, 0.4)" size="22"></tui-icon>
          </view>
          <view class="hotword_abso">
            <image src="/static/images/hotword.png" mode="aspectFill"></image>
          </view>
        </view>

        <view class="my_pet_function">
          <text class="my_pet_function_text">浏览量 {{conditionItem.views}}</text>
          <view class="my_pet_share" @click="onShare(conditionItem,'动态')">
            <image src="/static/share.png" mode="widthFix"></image>
            <text>{{conditionItem.shares > 0? conditionItem.shares : '分享'}}</text>
          </view>
          <view class="my_pet_share" @click="onComment(conditionItem,'动态')">
            <image src="/static/comment.png" mode="widthFix"></image>
            <text>{{conditionItem.comments > 0? conditionItem.comments : '评论'}}</text>
          </view>
          <view class="my_pet_share" @click="onLiked(conditionItem)">
            <image v-if="!conditionItem.isLiked" src="/static/give.png" mode="widthFix"></image>
            <image v-else src="/static/give_active.png" mode="widthFix"></image>
            <text>{{conditionItem.likes > 0? conditionItem.likes : '点赞'}}</text>
          </view>
        </view>
      </block>
    </block>
    <block v-if="conditionItem.articleType == 1">
      <view class="my_pet_user_box">
        <view class="my_pet_user_box_left" @click="navTo('/subpkg/userInfo/userInfo?id=' + conditionItem.createUser)">
          <image class="image" :src="conditionItem.avatar" mode="widthFix"></image>
          <view class="my_pet_user_title">
            <h1>{{conditionItem.nickname}}</h1>
            <block v-if="articleShow">
              <text v-if="conditionItem.createTime">{{conditionItem.createTime}}</text>
            </block>
            <text v-else>{{$util.dateUtils.format(conditionItem.createTime)}}</text>
          </view>
        </view>
        <!-- <van-rate v-if="scoreShow" class="my_pet_user_box_right" :value="ratevalue" @change="onrateChange" /> -->
        <view class="my_pet_user_box_right" v-if="attentionShow && conditionItem.createUser != userInfo.id">
          <view :class="conditionItem.followed?'attention':'attention1'"
            @click="onfollowed(conditionItem.createUser,conditionItem.followed)">
            {{conditionItem.followed?'已关注':'关注'}}
          </view>
        </view>
      </view>
      <block>
        <view class="my_pet_body1" @click="navTo('/subpkg/details/details?id='+ conditionItem.id + '&name=' + '文章')">
          <text style="font-weight: 500;">{{conditionItem.title}}</text>
        </view>
        <!-- 图片列表 -->
        <user-imglist :sliderImgs="conditionItem.sliderImgs" :articleImgs="true"></user-imglist>
        <!-- 品种 -->
        <view class="my_pet_variety" v-if="varietiesShow">
          <view class="classify" v-if="articleShow">
            文章
          </view>
          <view class="variety" v-if="varietyShow"
            @click="navTo('/subpkg/petInfo/petInfo?id=' + conditionItem.associatedCategoryId)">
            <image src="/static/clicleicon.png" class="variety_text" mode="aspectFill"></image>
            <text>{{conditionItem.categoryName}}</text>
          </view>
          <view class="variety" v-if="conditionItem.productName"
            @click="navTo('/subpkg/productdetails/productdetails?id=' + conditionItem.associatedProductId)">
            <image v-if="conditionItem.previewImage" class="variety_text" :src="conditionItem.previewImage"
              mode="aspectFill"></image>
            <text>{{conditionItem.productName}}</text>
          </view>
          <view v-if="conditionItem.activityTitle" class="variety"
            @click="navTo('/subpkg/activity_particulars/activity_particulars?id=' +conditionItem.associatedActivityId)">
            <image src="/static/activeicon.png" class="variety_text" mode="aspectFill"></image>
            <text>{{conditionItem.activityTitle}}</text>
          </view>
        </view>

        <!-- 评论 -->
        <view v-if="conditionItem.comments > 0" class="hotword"
          @click="navTo('/subpkg/details/details?id='+ conditionItem.id + '&name=' + '动态')">
          <view class="hotword_text">
            <text style="color: rgba(61, 61, 61, 0.8);font-weight: 500;">{{conditionItem.hotComment.nickname}}：</text>
			{{conditionItem.hotComment.content}}
          </view>
          <view class="hotword_box">
            <text>查看全部{{conditionItem.hotComment.replies}}条回复</text>
            <tui-icon name="arrowright" color="rgba(61, 61, 61, 0.4)" size="22"></tui-icon>
          </view>
          <view class="hotword_abso">
            <image src="/static/images/hotword.png" mode="aspectFill"></image>
          </view>
        </view>


        <view class="my_pet_function">
          <text class="my_pet_function_text">浏览量 {{conditionItem.views}}</text>
          <view class="my_pet_share" @click="onShare(conditionItem,'文章')">
            <image src="/static/share.png" mode="widthFix"></image>
            <text>{{conditionItem.shares > 0? conditionItem.shares : '分享'}}</text>
          </view>
          <view class="my_pet_share" @click="onComment(conditionItem,'文章')">
            <image src="/static/comment.png" mode="widthFix"></image>
            <text>{{conditionItem.comments > 0? conditionItem.comments : '评论'}}</text>
          </view>
          <view class="my_pet_share" @click="onLiked(conditionItem)">
            <image v-if="!conditionItem.isLiked" src="/static/give.png" mode="widthFix"></image>
            <image v-else src="/static/give_active.png" mode="widthFix"></image>
            <text>{{conditionItem.likes > 0? conditionItem.likes : '点赞'}}</text>
          </view>
        </view>
      </block>
    </block>

    <block v-if="conditionItem.articleType == 2">
      <view class="my_pet_user_box">
        <view class="my_pet_user_box_left" @click="navTo('/subpkg/userInfo/userInfo?id=' + conditionItem.createUser)">
          <image class="image" :src="conditionItem.avatar" mode="widthFix"></image>
          <view class="my_pet_user_title">
            <h1>{{conditionItem.nickname}}</h1>
            <block v-if="articleShow">
              <text v-if="conditionItem.createTime">{{conditionItem.createTime}}</text>
            </block>
            <text v-else>{{$util.dateUtils.format(conditionItem.createTime)}}</text>
          </view>
        </view>
        <!-- <van-rate v-if="scoreShow" class="my_pet_user_box_right" :value="ratevalue" @change="onrateChange" /> -->
        <view class="my_pet_user_box_right" v-if="attentionShow && conditionItem.createUser != userInfo.id">
          <view :class="conditionItem.followed?'attention':'attention1'"
            @click="onfollowed(conditionItem.createUser,conditionItem.followed)">
            {{conditionItem.followed?'已关注':'关注'}}
          </view>
        </view>
      </view>
      <block>
        <view class="my_pet_body" @click="navTo('/subpkg/details/details?id=' + conditionItem.id  + '&name=' + '点评')">
          <rich-text v-if="conditionItem.postsContent" :nodes="this.$util.Escape2Html(conditionItem.postsContent)"></rich-text>
		 
        </view>
        <!-- 图片列表 -->
        <user-imglist :sliderImgs="conditionItem.sliderImgs"></user-imglist>
        <!-- 品种 -->
        <view class="my_pet_variety" v-if="varietiesShow">
          <view class="variety" @click="navTo('/subpkg/petInfo/petInfo?id=' + conditionItem.associatedCategoryId)">
            <image src="/static/clicleicon.png" class="variety_text" mode="aspectFill"></image>
            <text>{{conditionItem.categoryName}}</text>
          </view>
          <view class="variety" v-if="conditionItem.productName && productNameShow"
            @click="navTo('/subpkg/productdetails/productdetails?id=' + conditionItem.associatedProductId)">
            <!-- <view class="variety_text">#</view> -->
            <image v-if="conditionItem.previewImage" class="variety_text" :src="conditionItem.previewImage"
              mode="aspectFill"></image>
            <text>{{conditionItem.productName}}</text>
          </view>
          <view v-if="conditionItem.activityTitle" class="variety"
            @click="navTo('/subpkg/activity_particulars/activity_particulars?id=' +conditionItem.associatedActivityId)">
            <image src="/static/activeicon.png" class="variety_text" mode="aspectFill"></image>
            <text>{{conditionItem.activityTitle}}</text>
          </view>
        </view>

        <!-- 评论 -->
        <view v-if="conditionItem.comments > 0" class="hotword"
          @click="navTo('/subpkg/details/details?id='+ conditionItem.id + '&name=' + '动态')">
          <view class="hotword_text">
            <text style="color: rgba(61, 61, 61, 0.8);font-weight: 500;">{{conditionItem.hotComment.nickname}}：</text>
			{{conditionItem.hotComment.content}}
          </view>
          <view class="hotword_box">
            <text>查看全部{{conditionItem.hotComment.replies}}条回复</text>
            <tui-icon name="arrowright" color="rgba(61, 61, 61, 0.4)" size="22"></tui-icon>
          </view>
          <view class="hotword_abso">
            <image src="/static/images/hotword.png" mode="aspectFill"></image>
          </view>
        </view>


        <view class="my_pet_function">
          <text class="my_pet_function_text">浏览量 {{conditionItem.views}}</text>
          <view class="my_pet_share" @click="onShare(conditionItem,'点评')">
            <image src="/static/share.png" mode="widthFix"></image>
            <text>{{conditionItem.shares > 0? conditionItem.shares : '分享'}}</text>
          </view>
          <view class="my_pet_share" @click="onComment(conditionItem,'点评')">
            <image src="/static/comment.png" mode="widthFix"></image>
            <text>{{conditionItem.comments > 0? conditionItem.comments : '评论'}}</text>
          </view>
          <view class="my_pet_share" @click="onLiked(conditionItem)">
            <image v-if="!conditionItem.isLiked" src="/static/give.png" mode="widthFix"></image>
            <image v-else src="/static/give_active.png" mode="widthFix"></image>
            <text>{{conditionItem.likes > 0? conditionItem.likes : '点赞'}}</text>
          </view>
        </view>
      </block>
    </block>

    <!--uni-app-->
    <!-- <tui-modal :show="modalShow" :button="button" content="确定删除评论吗？" @click="modalShowClick"></tui-modal> -->
  </view>
</template>

<script>
  // import VanRate from '@/wxcomponents/vant/rate/index'
  import userImglist from "@/components/user_imglist/user_imglist.vue"
  import {
    mapActions,
    mapGetters,
    mapMutations
  } from 'vuex'
  import {
    getattention,
    getLikeed,
    removeattention
  } from '@/api/community.js'

  export default {
    name: "user_introduced",
    data() {
      return {
        ratevalue: 4,
        // modalShow: false,
        transShow: false,
        mode: ['fade'],
        styles: {
          position: 'fixed',
          bottom: 0,
          top: 0,
          left: 0,
          right: 0,
          display: 'flex',
          'justify-content': 'center',
          'align-items': 'center',
          'background-color': 'rgba(61,61,61,0.8)'
        },
        likeflag: true,
        followedflag: true,
        modalShow: false,
        // button: [{
        //     text: "还是算了",
        //     type: "white",
        //     plain: true
        //   },
        //   {
        //     text: "确定删除",
        //     type: "white",
        //     plain: true
        //   }
        // ],
      };
    },
    components: {
      // userFocus,
      // userLike,
      // 'van-rate': VanRate,
      'user-imglist': userImglist
    },
    computed: {
      ...mapGetters('m_user', ['userInfo'])
    },
    props: {
      conditionItem: {
        type: [Object, Array],
        default: () => {
          return [];
        }
      },
      attentionShow: {
        type: Boolean,
        default: true
      },
      articleShow: {
        type: Boolean,
        default: true
      },
      varietiesShow: {
        type: Boolean,
        default: true
      },
      scoreShow: {
        type: Boolean,
        default: false
      },
      productNameShow: {
        type: Boolean,
        default: true
      },
      varietyShow: {
        type: Boolean,
        default: true
      },
    },
    methods: {
      onrateChange(e) {
        this.ratevalue = e.detail
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      // 关注
      onfollowed(createUser, followed) {
        if (this.followedflag) {
          this.followedflag = false
          if (this.conditionItem.followed) {
            getattention(createUser).then(res => {
              this.$emit('onfollowed', {
                createUser,
                followed
              })
              this.followedflag = true
            })
          } else {
            getattention(createUser).then(res => {
              this.$emit('onfollowed', {
                createUser,
                followed
              })
              this.followedflag = true
            })
          }
        }
      },
      onLiked(conditionItem) {
        if (this.likeflag) {
          this.likeflag = false
          getLikeed({
            associatedId: conditionItem.id,
            associatedType: conditionItem.articleType,
            associatedUserId: conditionItem.createUser
          }).then(res => {
            this.$emit('onlikeShow', {
              id: conditionItem.id,
              isLiked: conditionItem.isLiked
            })
            this.likeflag = true
          });
        }
      },
      removeShow(ids) {
        console.log(ids)
        removeattention(ids).then(res => {
          // console.log(res)
          this.$emit('onremoveShow', ids)
        })
      },
      onComment(conditionItem, name) {
        uni.navigateTo({
          url: `/subpkg/details/details?id=${conditionItem.id}&name=${name}`
        })
      },
      onShare(conditionItem, name) {
        uni.navigateTo({
          url: `/subpkg/details/details?id=${conditionItem.id}&name=${name}`
        })
      },
      likesType(isLiked) {
        if (!isLiked) {
          this.$util.Tips({
            title: '点赞成功！'
          });
        } else {
          this.$util.Tips({
            title: '取消点赞成功！'
          });
        }
      },
      transShowClick(e) {
        // console.log(e)
        this.transShow = !e.detail
      }
    }
  }
</script>

<style lang="scss">
  /deep/ .tui-modal-btn::after {
    border: none !important;
  }

  /deep/ .tui-modal-content {
    font-size: 24px !important;
  }

  .container {
    padding-bottom: 10rpx;
    border-bottom: 1rpx solid rgba(245, 245, 245, 1);
  }

  // 关注
  .attention {
    padding: 0rpx 25rpx;
    // background-color: rgba(253, 211, 56, 0.5);
    border-radius: 26.5rpx;
    color: rgba(51, 51, 51, 0.4) !important;
    font-size: 26rpx;
    text-align: center;
    line-height: 52rpx;
    font-weight: 500;
    border: 2rpx solid rgba(61, 61, 61, 0.4);
  }

  // 未关注
  .attention1 {
    padding: 0rpx 25rpx;
    // background-color: rgba(253, 211, 56, 1);
    border-radius: 26.5rpx;
    color: rgba(51, 51, 51, 1) !important;
    font-size: 26rpx;
    text-align: center;
    line-height: 52rpx;
    font-weight: 500;
    border: 2rpx solid rgba(61, 61, 61, 1);
  }

  /deep/ .tui-modal-btn,
  .data-v-d285c6d4 {
    font-size: 34rpx !important;
  }


  /deep/ .van-cell {
    align-items: center;

    /deep/ .van-cell__title {
      font-size: 34rpx;
      line-height: 64rpx;
    }
  }

  .my_pet_user_box1 {
    padding-top: 0rpx !important;
  }

  .my_pet_user_box {
    height: 74rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 50rpx;

    .my_pet_user_box_left {
      width: 80%;
      display: flex;

      .image {
        height: 74rpx !important;
        width: 74rpx;
        border-radius: 50%;
      }

      .my_pet_user_title {
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 18rpx;
        height: 74rpx;

        h1 {
          width: 100%;
          color: rgba(61, 61, 61, 1);
          font-size: 30rpx;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        text {
          color: rgba(61, 61, 61, 0.5);
          font-size: 24rpx;
        }
      }
    }


    .my_pet_user_box_right {}
  }

  .my_pet_body {
    margin-top: 15rpx;
    line-height: 52rpx;
    font-size: 28rpx;
    color: rgba(61, 61, 61, 1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .my_pet_body1 {
    margin-top: 25rpx;
    line-height: 56rpx;
    font-size: 34rpx;
    color: rgba(61, 61, 61, 1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .my_pet_variety {
    display: flex;
    margin-top: 35rpx;

    .classify {
      width: 90rpx;
      height: 42rpx;
      // border: 1px solid rgba(255, 102, 102, 1);
      border-radius: 26.5rpx;
      color: rgba(255, 101, 66, 1);
      font-size: 24rpx;
      text-align: center;
      line-height: 42rpx;
      margin-right: 22rpx;
      box-sizing: border-box;
      background-color: rgba(255, 101, 66, 0.08);
    }

    .variety {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 80px;
      height: 42rpx;
      padding: 0 20rpx;
      background-color: rgba(61, 61, 61, 0.05);
      border-radius: 26.5rpx;
      margin-right: 22rpx;
      color: rgba(61, 61, 61, 1);
      font-size: 24rpx;

      // line-height: 42rpx;
      .variety_text {
        width: 26rpx;
        height: 26rpx;
        background-color: rgba(253, 211, 56, 1);
        border-radius: 26rpx;
        text-align: center;
        // vertical-align: middle;
        line-height: 26rpx;
        margin-right: 6rpx;
        font-weight: bold;
      }

      text {
        line-height: 42rpx;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 80%;
        padding: 0 8rpx;
      }
    }
  }

  .my_pet_function {
    margin-top: 45rpx;
    display: flex;
    justify-content: space-between;
    padding-bottom: 50rpx;
    // border-bottom: 1rpx solid rgba(245, 245, 245, 1);
    // border-bottom: 1px solid #ededed;
    align-items: center;


    .my_pet_function_text {
      color: rgba(61, 61, 61, .5);
      font-size: 26rpx;
    }

    image {
      width: 42rpx;
      height: 42rpx;
    }

    .my_pet_share {
      position: relative;
      display: flex;
      align-items: center;
      color: rgba(61, 61, 61, 0.8);
      font-size: 24rpx;

      text {
        margin-left: 12rpx;
      }
    }
  }

  .attentionPopup {
    .tui-text {
      position: fixed;
      bottom: 8%;
      width: 80%;
      height: 40%;
      background-color: #fff;
      border-radius: 30rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .tui-text-box:last-child {
        border: none !important;
      }

      .tui-text-box {
        width: 100%;
        height: 33.33%;
        padding: 0 50rpx;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        // justify-content: space-between;
        border-bottom: 1px solid #f5f5f5;

        text {
          font-size: 32rpx;
        }

        h1 {
          color: rgba(61, 61, 61, 0.8);
          font-size: 30rpx;
          margin-left: 25rpx;
        }
      }
    }
  }

  .hotword {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 136rpx;
    background-color: rgba(247, 247, 247, 1);
    border-radius: 5rpx;
    margin: 40rpx 0;
    padding: 22rpx 24rpx;

    .hotword_text {
      font-size: 26rpx;
      color: rgba(61, 61, 61, 0.6);
    }

    .hotword_box {
      margin-top: 15rpx;
      display: flex;
      align-items: center;
      color: rgba(61, 61, 61, 0.4);
      font-size: 26rpx;
    }

    .hotword_abso {
      position: absolute;
      right: 0;
      top: 0;
      width: 104rpx;
      height: 38rpx;
      background-color: rgba(253, 211, 56, 1);
      border-top-left-radius: 0px;
      border-top-right-radius: 5rpx;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 15rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 78rpx;
        height: 30rpx;
      }
    }
  }
</style>
